<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <template id="mybox">
        <div class="box" style="width: 100px; height: 100px; background-color: aquamarine;"></div>
        <slot name="slot1"></slot>
    </template>
    <my-box>
        <img slot="slot1" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c79c254cc474099b6cc793659e37f2d~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?" />
    </my-box>
</body>
<script>
    //组件结构比较复杂时，可以使用template
    class MyBox extends HTMLElement{
        constructor() {
            super();

            let mybox = document.querySelector('#mybox');
            let boxContent = mybox.content;

            let newNode = boxContent.cloneNode(true);

            let shadow = this.attachShadow({
                mode:'open'
            })

            shadow.appendChild(newNode);

            this.getData();
        }

        getData() {
            console.log(this.shadowRoot)
        }
    }

    customElements.define('my-box',MyBox);
</script>
</html>